import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController, ModalController,LoadingController, AlertController, ToastController, InfiniteScroll  } from 'ionic-angular';
import { GamePage } from '../game/game';
import { GameRuntimePage } from '../game-runtime/game-runtime';
import { WebviewPage } from '../webview/webview';
import { DataService } from '../../services/data';
import { AppGlobal } from '../../app/app.global';
import { LoginPage } from '../login/login';
import { calcBindingFlags } from '../../../node_modules/@angular/core/src/view/util';
import { bindCallback } from '../../../node_modules/rxjs/observable/bindCallback';

@Component({
  selector: 'page-games',
  templateUrl: 'games.html',
  providers: [DataService]
})
export class GamesPage {
  category_id = '1'
  page_index = 0
  page_size = 10

  @ViewChild(InfiniteScroll) infiniteScroll: InfiniteScroll;

  public games = []
  public creatives = []

  // this tells the tabs component which Pages
  // should be each tab's root Page
  constructor(public navCtrl: NavController, public modalCtrl: ModalController, public dataService: DataService, public loadingCtrl: LoadingController, public alertCtrl: AlertController, public toastCtrl: ToastController) {
    
  }

  public counter = Array;

  ionViewDidLoad() {
    this.dataService.getCreatives().subscribe(data => {
      this.creatives = data;
    })

    this.loadGames((data) =>{});
  }

  categoryChanged($event){
    this.infiniteScroll.enable(true)
    let loader = this.loadingCtrl.create({
      content: "Loading...",
    });
    loader.present();
    this.games = [];
    this.page_index = 0;
    this.loadGames((data) =>{
      loader.dismiss()
    });
  }

  loadGames(callback){
    this.dataService.getGames(this.category_id, this.page_index, this.page_size).subscribe(data => {
      for(let item of data){
        this.games.push(item)
      }
      callback(data)
    });
  }

  error(){
    let alert = this.alertCtrl.create({
      title: '提示',
      subTitle: "网络异常，请检查网络！",
      buttons: [
        {
          text: 'OK',
          handler: () => {
          }
        }
      ]
    });
    alert.present();
  }

  pushSlide(slide){
    switch(slide.type){
      case 'web':
      this.navCtrl.push(WebviewPage, {url : slide.url, title : slide.title});
      break;
      case 'game':
      this.navCtrl.push(GamePage, {id : slide.url});
      break;
    }
  }

  pushGameInfo(game){
    this.navCtrl.push(GamePage, {game : game});
  }

  pushGameRuntime(game){
    event.stopPropagation();
    if(AppGlobal.getInstance().isLogin){
      this.navCtrl.push(GameRuntimePage, {game : game});
    }else{
      let modal = this.modalCtrl.create(LoginPage, {canBack: true});
      modal.present();
    }
  }

  doInfinite(infiniteScroll){
    this.page_index += 1
    this.loadGames((data)=>{
      infiniteScroll.complete();
      console.log(data, data.length)
      if(data.length == 0){
        infiniteScroll.enable(false);
        this.showInfo("已加载所有");
      }
    });
  }

  //显示toast消息
  showInfo(msg){
    let toast = this.toastCtrl.create({
        message: msg, //提示消息
        duration: 1500,//1.5秒后自动消失
        // position: 'bottom',//位置top,bottom
        // showCloseButton:true, //是否显示关闭按钮
        // closeButtonText:"关闭" //关闭按钮字段
    });

    //关闭后执行的操作
    toast.onDidDismiss(() => { console.log('toast被关闭之后执行'); });

    //显示toast
    toast.present();//符合触发条件后立即执行显示。
  }
}
